<template>
	<view>


		<view v-if="show" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">
			<view class="cu-form-group">
				<view class="text-gray title align-start">请输入场链接值</view>
				<textarea placeholder="请输入文件名称" v-model="form.long_url" name="input"></textarea>
			</view>
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirm">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mx-2 margin-top-xl margin-bottom-xl shadow-lg">
			<view class="p-2 text-center" v-if="list.length===0">暂无短链接</view>
			<view class="flex " v-else v-for="(item,index) in list" :key="index">
				<view class="flex mb-1  py-1 mx-1 flex-direction align-start" style="width: 60%;">
					<view class="text-cut" style="width: 100%;">
						长链接：{{item.long_url}}
					</view>
					<view class="">
						短链接：{{item.short_url}}
					</view>
				</view>
				<view class="flex align-center">
					<view @click="del(item)" class="flex cu-tag round bg-orange">
						删除
					</view>
					<view @click="copy(item)" class="flex cu-tag round bg-orange">
						复制
					</view>
				</view>
			</view>

		</view>
		<view class="padding-xl">
			<button class="mt-2 block bg-green  lg  cu-btn round" @click="openModel">生成短链接</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				form: {
					long_url: '',
					action:'long2short'
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			copy(item){
				uni.setClipboardData({
					data:item.short_url
				})
			},
			hideModel() {
				this.show = false
				this.form = {
					long_url: '',
					action:'long2short'
				}
			},
			del(item) {
				uni.showModal({
					title: '高危操作',
					content: '是否要删除该二维码',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							uniCloud.callFunction({
								name: 'wxAction',
								data: {
									action: 'url',
									params: {
										id: item._id
									},
									options: 'del'
								},
								success: (res) => {
									if (res.data.code === 400) {
										return uni.showToast({
											title: res.data.data,
											icon: 'none'
										});
									}
									if (res.success) {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										});
										this.getList()
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			openModel() {
				this.show = !this.show
			},
			getList() {
				// 获取微信二维码数据列表
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'url',
						params: {},
						options: 'getlist'
					},
					success: (res) => {
						this.list = res.result.data.length !== 0 ? res.result.data : []
					},
					fail: () => {

					},
					complete: () => {

					}

				})
			},
			confirm() {
				// 组织数据
				let reg=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
				if(!reg.test(this.form.long_url)){
					return uni.showToast({
						title: '链接有误',
						icon: 'none'
					});
				}
				// 发送获取ticket请求
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'url',
						params: this.form,
						options: 'create'
					},
					success: (res) => {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
						this.hideModel()
						this.getList()
					},
					fail: () => {

					},
					complete: () => {

					}

				})
			}
		}
	}
</script>

<style>

</style>
